<template>
  <!-- 个人中民心 -->
  <view class="my-box">
    <view class="Personal_box">
      <view class="navbar-wrap">
        <view
          :class="['column',isFixedTop?'fixed':'']"
          :style="{background: background}"
          id="navbar"
        >
          <view style="font-size:36rpx" class="block">个人中心</view>
          <view style="font-size:28rpx;" class="block" @click="$routerTo({url : '../../personal/admin/index',data : supplier_action})">{{supplier_action.name}}</view>
        </view>
      </view>
      <!-- <view class="Personal_top">
        <text>个人中心</text>
        <view class="Admin" @click="$routerTo({url : '../../personal/admin/index',data : supplier_action})">{{supplier_action.name}}</view>
      </view>-->
      <view @click="$routerTo({url : '../../personal/setup/index'})" class="userInfo_box">
        <view class="avatar">
          <image mode="heightFix" :src="user_info.avatar" />
        </view>
        <view class="userInfo">
          <view class="user">
            <view class="username">{{user_info.username}}</view>
            <i class="iconfont icon-xingbienan"></i>
            <view class="Grade">{{user_info.level}}</view>
            <i class="iconfont icon-bianji"></i>
          </view>

          <view class="jifeng">积分 : {{user_info.pay_points}}</view>

          <view class="touxian">
            <view class="text">头衔 / 勋章</view>
            <image src="./../../static/touxian.png" />
          </view>
        </view>
      </view>
      <view class="rank_center_bg_box">
        <image mode="widthFix" :src="user_info.rank_center_bg" />
        <view class="huiyuan">
          <text>{{user_info.user_rank}}</text>
          <text>{{user_info.rank_desc_text}}</text>
        </view>
      </view>
    </view>
    <view class="main_box">
      <view class="match_block_box">
        <view class="match_block_top">智慧建筑直采平台</view>
        <view class="match_block">
          <view class="match_item" @click="judge(match_block.list[0])">
            <i class="iconfont icon-AI"></i>
            <view>{{match_block.list[0].name}}</view>
          </view>
          <view class="match_item" @click="judge(match_block.list[1])">
            <view class="match_value">{{match_block.list[1].value}}</view>
            <view>{{match_block.list[1].name}}</view>
            <view class="line"></view>
          </view>
          <view class="match_item" @click="judge(match_block.list[2])">
            <view class="match_value">{{match_block.list[2].value}}</view>
            <view>{{match_block.list[2].name}}</view>
            <view class="line"></view>
          </view>
          <view class="match_item" @click="judge(match_block.list[3])">
            <view class="match_value">{{match_block.list[3].value}}</view>
            <view>{{match_block.list[3].name}}</view>
            <view class="line"></view>
          </view>
        </view>
      </view>

      <view class="anzhuang_order_box" v-if="anzhuang_order.list.length == 0">
        <view class="anzhuang_order_top">{{anzhuang_order.name}}</view>
        <view class="anzhuang_order_main">暂无</view>
      </view>

      <view class="mall_order_box_top">智慧建筑集市</view>
      <view class="mall_order_box">
        <view
          class="mall_order_item"
          @click="judge(item)"
          v-for="(item,index) in mall_order.list"
          :key="index"
        >
          <image :src="item.ico"></image>
          <view class="name">{{item.name}}</view>
        </view>
      </view>

      <view class="mall_info_box">
        <view class="mall_info">
          <view
            class="mall_info_item"
            @click="judge(item)"
            v-for="(item,index) in mall_info.list"
            :key="index"
          >
            <view class="value">{{item.value}}</view>
            <view class="name">{{item.name}}</view>
            <view class="line" v-if="index > 0"></view>
          </view>
        </view>
      </view>

      <view class="mall_operate_box">
        <view
          class="mall_operate_item"
          @click="judge(item)"
          v-for="(item,index) in mall_operate.list"
          :key="index"
        >
          <image :src="item.ico" />
          <view class="name">{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      token: "",
      anzhuang_order: {}, //  待安装订单
      mall_info: {}, //智慧建筑集市信息
      mall_operate: {}, // 智慧建筑集市操作
      mall_order: {},
      match_block: {},
      set_action: {},
      supplier_action: {},
      user_info: {},

      navbarInitTop: 0, //导航栏初始化距顶部的距离
      isFixedTop: true, //是否固定顶部
      background: "" // 为了实现渐变背景颜色
    };
  },
  onLoad() {
    if (!wx.getStorageSync("userInfo").token) {
      uni.navigateTo({
        url: "../login/index"
      });
    }
  },
  /**
   * 监听页面滑动事件
   */
  onPageScroll: function(e) {
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    this.background = `rgba(0, 0, 0,${scrollTop / (scrollTop + 50)})`;
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var isSatisfy = scrollTop >= this.navbarInitTop ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (this.isFixedTop === isSatisfy) {
      return false;
    }
    this.isFixedTop = isSatisfy;
  },
  onShow() {
    if (this.navbarInitTop == 0) {
      //获取节点距离顶部的距离
      wx.createSelectorQuery()
        .select("#navbar")
        .boundingClientRect(function(rect) {
          if (rect && rect.top > 0) {
            var navbarInitTop = parseInt(rect.top);
            this.navbarInitTop = navbarInitTop;
          }
        })
        .exec();
    }

    this.token = wx.getStorageSync("userInfo").token;
    this.$axios({
      url: "/api/User/getUserCenter",
      data: { token: this.token }
    }).then(res => {
      let { returnData } = res.data;
      this.anzhuang_order = returnData.anzhuang_order;
      this.mall_info = returnData.mall_info;
      returnData.mall_operate.list.forEach((v,i) => {
        if(v.name == "账号管理"){
          returnData.mall_operate.list.splice(i,1);
        }
      });
      this.mall_operate = returnData.mall_operate;
      this.mall_order = returnData.mall_order;
      this.match_block = returnData.match_block;
      this.set_action = returnData.set_action;
      this.supplier_action = returnData.supplier_action;
      this.user_info = returnData.user_info;
    });
  },
  methods: {
    judge(data) {
      console.log(data);
      this.$routerTo({
        to: uni.navigateTo,
        url: data.url,
        data
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.topText {
  font-size: 30rpx;
  margin-bottom: 36rpx;
  margin-left: 36rpx;
  font-weight: 600;
}
.box {
  background: #fff;
  width: 100%;
  padding-top: 36rpx;
  border-radius: 20rpx;
}
.my-box {
  background: #fafafa;
  padding-bottom: 30rpx;
  .mall_operate_box {
    display: flex;
    flex-wrap: wrap;
    @extend .box;
    margin-top: 20rpx;
    padding-top: 0rpx;
    .mall_operate_item {
      width: 25%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 20rpx;
      image {
        width: 70rpx;
        height: 70rpx;
        margin-bottom: 10rpx;
        border: 1rpx dashed #888888;
      }
    }
  }
  .main_box {
    padding-right: 30rpx;
    padding-left: 30rpx;
    .mall_info_box {
      @extend .box;
      margin-top: 20rpx;
      .mall_info {
        display: flex;
        align-items: center;
        .mall_info_item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .name {
            font-size: 24rpx;
            color: rgba(69, 69, 69, 1);
            margin-bottom: 16rpx;
          }
          .value {
            font-size: 35rpx;
            font-weight: bold;
            color: rgba(254, 115, 60, 1);
          }
          .line {
            position: absolute;
            left: 0;
            width: 1rpx;
            height: 54rpx;
            border-left: 1px solid #ddd;
            top: 10rpx;
          }
        }
      }
    }
    .mall_order_box_top {
      @extend .topText;
      margin: 36rpx;
    }
    .mall_order_box {
      @extend .box;
      display: flex;
      align-items: center;
      height: 200rpx;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 14rpx;
        position: absolute;
        top: 0;
        background: #3271ef;
        border-radius: 20rpx 20rpx 0 0;
      }
      .mall_order_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image {
          width: 66rpx;
          height: 66rpx;
          margin-bottom: 10rpx;
        }
        .name {
          font-size: 24rpx;
        }
      }
    }
    .anzhuang_order_box {
      margin-top: 20rpx;
      padding: 36rpx;
      @extend .box;
      height: 190rpx;
      .anzhuang_order_top {
        margin-left: 0;
        @extend .topText;
      }
      .anzhuang_order_main {
        text-align: center;
      }
    }
    .match_block_box {
      @extend .box;
      height: 296rpx;
      .match_block_top {
        @extend .topText;
      }
      .match_block {
        display: flex;
        align-items: center;
        .match_item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .match_value {
            font-size: 60rpx;
            font-weight: 500;
            color: #3271ef;
            margin-bottom: 16rpx;
          }
          .line {
            position: absolute;
            left: 0;
            width: 1rpx;
            height: 68rpx;
            border-left: 1px solid #ddd;
            top: 36rpx;
          }
          i.iconfont.icon-AI {
            font-size: 70rpx;
            margin-bottom: 16rpx;
            color: #3271ef;
          }
        }
      }
    }
  }
  .Personal_box {
    padding: 154rpx 218rpx 30rpx 30rpx;
    background: url("../../static/Personal_top.png") no-repeat;
    background-size: 100% 100%;
    height: 400rpx;
    border-radius: 0px 0px 10px 10px;
    position: relative;
    .rank_center_bg_box {
      position: absolute;
      bottom: 8rpx;
      height: 90rpx;
      width: 688rpx;
      .huiyuan {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 77%;
        text {
          color: #7d4127;
          font-weight: 600;
          &:nth-child(1) {
            font-size: 32rpx;
          }
        }
      }
    }
    .Personal_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      margin-bottom: 40rpx;
      text {
        font-size: 32rpx;
      }
      text.Admin {
        font-size: 24rpx;
      }
    }
    .userInfo_box {
      display: flex;
      justify-content: space-between;
      .avatar {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .userInfo {
        color: #fff;
        width: 100%;
        .jifeng {
          font-size: 22rpx;
          font-weight: 300;
          margin-bottom: 10rpx;
        }
        .touxian {
          display: flex;
          .text {
            font-size: 22rpx;
            font-weight: 300;
            margin-right: 10rpx;
          }
          image {
            width: 26rpx;
            height: 26rpx;
          }
        }
        .user {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          .username {
            margin-right: 14rpx;
          }
          i.iconfont {
            margin-right: 14rpx;
          }
          .Grade {
            margin-right: 30rpx;
            width: 62rpx;
            text-align: center;
            line-height: 29rpx;
            background: rgba(254, 115, 60, 1);
            border-radius: 6rpx;
            font-size: 20rpx;
          }
          i.iconfont.icon-bianji {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
//以下样式为顶部用
.navbar-wrap {
  width: 100%;
}

.navbar-wrap .column {
  width: 100%;
  padding: 45rpx 182rpx 10rpx 30rpx;
  display: flex;
  justify-content: space-between;
  background: transparent;
  top: 0;
  left: 0;
  z-index: 100;
}

.navbar-wrap .column.fixed {
  position: fixed;
}
.navbar-wrap .column .block {
  font-size: 32rpx;
  width: 30%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  letter-spacing: 1px;
  position: relative;
  &:nth-child(2) {
    width: 20%;
  }
}
</style>